<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>详细信息</title>
<link rel="stylesheet" type="text/css" href="css/lib/swiper.min.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/doumee.css"/>
<link rel="stylesheet" type="text/css" href="css/lib/dialog.css"/>
<link rel="stylesheet" type="text/css" href="css/public.css"/>
<link rel="stylesheet" type="text/css" href="css/user.css"/>
<script src="js/lib/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/swiper.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/vue-2.5.17.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/doumee.js" type="text/javascript" charset="utf-8"></script>
<script src="js/lib/dialog.js" type="text/javascript" charset="utf-8"></script>
</head>

<body>

<header class="header">
	<a class="left_icon back_btn"></a>
	<h4 class="title">详细信息</h4>
	<a class="right_icon">编辑</a>
</header>

<div class="swiper-container Main" id="Main">
	<div class="swiper-wrapper">
		<div class="swiper-slide content">
			
			<div class="children" id="userDtlMod">
				<!--用户信息-->
				<div class="userInfo top-line bottom-line bg-w dm-mt dm-mb flex-row">
					<div class="photo cover">
						<img :src="user.photo" />
					</div>
					<div class="flex-full">
						<h5 class="name">{{user.name}}</h5>
						<h6 class="phone">联系号码：{{user.phone}}</h6>
						<h6 class="phone">跟进导购：{{user.guider}}</h6>
					</div>
				</div>
				<!--标签-->
				<div class="tagMod bg-w top-line bottom-line dm-mt dm-mb" v-if="user.tag.length > 0">
					<h5 class="dm-title">标签</h5>
					<div class="tag-box">
						<span v-for="item in user.tag">{{item}}</span>
					</div>
				</div>
				<!--来源-->
				<div class="dm-norlist bg-w top-line bottom-line">
					<ul class="list bottom-line flex-row">
						<li class="name">来源</li>
						<li class="cot tl flex-full">{{user.source}}</li>
					</ul>
					<ul class="list bottom-line flex-row flex-top">
						<li class="name">地址</li>
						<li class="cot addr tl flex-full">
							<div class="addr-list bottom-line" v-for="item in user.addr">{{item}}</div>
						</li>
					</ul>
					<ul class="input flex-row arrow" @click="editRemark">
						<li class="name">备注</li>
						<li class="cot flex-full">
							<input type="text" readonly="readonly" class="max-input" :value="user.remark" placeholder="有购买厨柜的意向" />
						</li>
					</ul>
				</div>
				
				<button class="submitBtn" type="button" @click="submit">提交意向</button>
				
			</div>
			
		</div>
	</div>
</div>

<script type="text/javascript">
	var vm = new Vue({
		el:'#Main',
		data:{
			user:{
				id:1001,
				photo:'image/test/pro-full.png',
				name:'王多鱼',
				phone:'18756197235',
				guider:'杨凡',
				tag:['北欧','三室一厅','北欧','三室一厅','北欧','三室一厅','北欧','三室一厅'],
				source:'主动关注',
				addr:[
					'安徽省合肥市蜀山区望江西路与肥西路交口西湖国际广场C座1703室',
					'安徽省合肥市蜀山区望江西路与肥西路交口西湖国际广场C座1704室',
					'安徽省合肥市蜀山区望江西路与肥西路交口西湖国际广场C座1705室',
					'安徽省合肥市蜀山区望江西路与肥西路交口西湖国际广场C座1706室'
				],
				remark:null,
			},
		},
		methods:{
			//提交
			submit:function(){
				
			},
			//编辑备注
			editRemark:function(){
				var that = this;
				remarkMask(function(val){
					that.user.remark = val;
				},that.user.remark);
			},
		},
		mounted:function(){
			pullSwiper('#Main');
		},
	});
	
	
	
	function remarkMask(callback,text=null){
		$("body").append(`
			<div id="remarkMask">
				<div class="dm-mask"></div>
				<div class="mod">
					<h4 class="title">备注</h4>
					<textarea id="remarkVal" rows="4" cols="" placeholder="有购买厨柜的意向">${text==null?'':text}</textarea>
					<div class="btn-box top-line flex-row">
						<a class="cancel flex-full">取消</a>
						<a class="enter left-line flex-full">确定</a>
					</div>
				</div>
			</div>	
		`);
		
		//取消
		$("#remarkMask .cancel").click(function(){
			$("#remarkMask").remove();
		});
		
		//确定
		$("#remarkMask .enter").click(function(){
			var val = $("#remarkVal").val();
			$("#remarkMask").remove();
			if(typeof callback == 'function'){
				callback(val);
			};
		});
	};
</script>

</body>
</html>
